.offscreen {
  position: absolute;
  left: -1024rem;
}

.suspension {
  position: fixed;
  bottom: 3rem;
  right: 2rem;
  z-index: 1000;

  & a {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 50%;
    background-color: $white-bis;
    border: 1px solid $media-border;
    box-shadow: 0 1px 4px $box-shadow-darker;
    text-align: center;
    opacity: 1;
    cursor: pointer;

    & + a {
      margin-top: 1rem;
    }

    &.to-top {
      color: $grey;
      transition: all $easing $speed;

      &:hover {
        color: $white;
        background-color: $grey;
        border-color: $grey;
      }
    }

    &.to-comment {
      color: $primary;
      transition: all $easing $speed;

      &:hover {
        color: $white;
        background-color: $primary;
        border-color: $primary;
      }
    }
  }

  & .is-hide {
    display: none;
  }
}

.not-found {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 15.5rem;
  font-family: $family-monospace;
  text-align: center;

  & .error-emoji {
    color: $text-strong;
    font-size: $size-1;
  }

  & .error-text {
    color: $text-light;
    font-size: $size-5;
  }

  & .error-link {
    margin-top: 2rem;

    & a {
      font-size: $size-6;
      color: $primary;
    }
  }
}
